<template>
    <div class="user-center-user-list">
        <div class="display-flex section align-center" v-for="(item, index) in userListData.list" :key="index" @click="login(index)">
            <div class="left">
                <van-image :src="chooseIcon" fit="contain" class="choose-icon" v-if="item.checked"/>
            </div>
            <div class="display-flex align-center right">
                <van-image :src="item.avatar" fit="cover" class="avatar-icon"/>
                <div class="ml-20">
                    <div>
                        <span class="font-siz-38 text-bold">{{item.userName}}</span>
                        <span class="font-size-24">{{ item.phonenumber }}</span>
                    </div>
                    <span class="font-size-24 mt-25 display-inline">{{item.shopName}}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import chooseIcon from '@/assets/images/choose.png'
    import { useRoute, useRouter } from 'vue-router'
    import { getUsersList, h5login, getUsersListByOpenId, getOpenIdByCode, logout } from '@/api/user'
    import { onMounted, reactive } from 'vue'
    import { getConfigKey } from '@/api/wechat'
    import { setToken, setExpiresIn, getOpenId, setOpenId  } from '@/utils/auth'
    import type { UserListData} from '@/type/userInfo'
    import { setLocalStorage, getLocalStorage } from '@/utils/localStorage'

    const route = useRoute()
    const router = useRouter()
    const configKeyParam: string = 'GZH_APP_ID'
    let wxAppid:string = ''
    const code:any = route.query.code
    //是否已调用微信返回的code,如果调用wxCode则为1，否则为0
    const wxCode: number = getLocalStorage('wxCode') == 1?1:0
    const userInfo:any = getLocalStorage('userInfo')
    const openId:any = getOpenId()
    const userListData: UserListData = reactive({
        list:[]
    })
    
    onMounted(() => {
        router.replace('/approve/bindingDetail')
        // if(openId) {
        //     usersListByOpenId(openId)
        // } else {
        //     if(code) {
        //         if(wxCode == 0) {
        //             const href = window.location.href.split('?')[0]
        //             return configKey(href)  
        //         }
        //         if(wxCode == 1) {
        //             setLocalStorage('wxCode', 0)
        //             return openIdByCode(code)
        //         }
        //     } else {
        //         configKey(window.location.href)
        //     }
        // }
    })

    // function usersList(code:string) {
    //     getUsersList({code:code}).then((res: any) => {
    //         const data = res.data
    //         userListData.list = data
    //         for(let i in data) {
    //             data[i].checked = data[i].userName == userInfo.userName?true:false
    //         }
    //         if(data && data.length == 0) {
    //             return router.replace({path:'/noBinding',query:{msg1:'您暂未绑定中恒云仓客户，',msg2:'请联系公司管理员扫码绑定！'}})
    //         }
    //         if(data && data.length == 1) {
    //             login(0)
    //         }
    //     })
    // }

    function openIdByCode(code:string) {
        getOpenIdByCode({code:code}).then((res:any) => {
            const openId: string = res.msg
            setOpenId(openId)
            usersListByOpenId(openId)
        })
    }

    function usersListByOpenId(openId:string) {
        getUsersListByOpenId({openId:openId}).then((res:any) => {
            const data = res.data
            userListData.list = data
            for(let i in data) {
                data[i].checked = false
                if(userInfo) {
                    data[i].checked = data[i].userName == userInfo.userName?true:false
                }
            }
            if(data && data.length == 0) {
                return router.replace({path:'/noBinding',query:{msg1:'您暂未绑定中恒云仓客户，',msg2:'请联系公司管理员扫码绑定！'}})
            }
            if(data && data.length == 1) {
                login(0)
            }
        })
    }

    function configKey(redirectUri:string) {
        getConfigKey(configKeyParam).then((res: any) => {
            wxAppid = res.msg
            getCode(redirectUri)
        })
    }

    function getCode(redirectUri:string) {
        setLocalStorage('wxCode', 1)
        let param = "appid=" + wxAppid + "&redirect_uri=" + redirectUri + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
        let url = "https://open.weixin.qq.com/connect/oauth2/authorize?" + param;
        window.location.href = url
    }

    function login(index:number) {
        logout().then(() => {
            const data: any = userListData.list
            h5login({username:data[index].userName, password:data[index].password}).then((res: any) => {
                const data1 = res.data
                setToken(data1.access_token)
                setExpiresIn(data1.expires_in)
                setLocalStorage('userInfo',{
                    userName: data[index].userName,
                    avatar: data[index].avatar,
                    nickName: data[index].nickName,
                    shopName: data[index].shopName,
                    shopId:data[index].shopId,
                    issh:data[index].issh,
                })
                setLocalStorage('userListLen',data.length)
                router.replace({path:'/userCenter' })  
            })
        })
    }
</script>
<style lang="scss" scoped>
    .user-center-user-list {
        background-color: #F3F4F7;
        .nav-bar {
            background-color:#EBECEE;
            color:#000;
        }
        .section {
            margin:36px;
            padding:40px 0;
            background:#fff;
            border-radius: 10px;
            .left {
                margin-left: 34px;
                width: 50px;
                height: 35px;
                .choose-icon {
                    width: 50px;
                    height: 35px;
                }
            }
            .right {
                margin-left:59px;
                .avatar-icon {
                    width: 90px;
                    height: 90px;
                    border-radius: 45px;
                }
            }
        }
    }
    
</style>